<!DOCTYPE html>
<html lang="zn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>uanuanhuan</title>
    <link rel="stylesheet" href="style.css">
    <link rel="icon" href="tou.png" type="image/x-icon">
    <meta name="anthor" content="huhuan">
    <meta name="keywords" content="个人作品集，个人网站，设计作品，胡欢，UI/UX，交互设计">

    <body>

        <header id="home">
            <div>
                <div class="tiaozheng">
                    <div class="zipaikuang">

                    </div>
                    <div class="shangceng" style="transition:all 3s;">
                        <img src="自拍.jpg" alt="" class="zipai">
                    </div>



                    <p>HELLO
                        <br>
                        <br> ITS HU HUAN

                    </p>
                </div>
                <h1>Welcome to my channel</h1>
                <div class="nav">
                    <a href="#home" class="ho">HOME</a>
                    <br>
                    <a href="#work" class="ho">WORKS</a>
                    <br>
                    <a href="#about" class="ho">ABOUT ME</a>
                    <br>
                    <a href="#contact" class="ho">CONTACT ME</a>
                </div>

            </div>
        </header>
        <ul>
            <li>
                <div><a href="#home">HOME</a></div>
                <div>HOME</div>
            </li>
            <br>
            <br>
            <li>
                <div><a href="#work">WORKS</a></div>
                <div>WORKS</div>
            </li>
            <br>
            <br>
            <li>
                <div> <a href="#about">ABOUT</a></div>
                <div>ABOUT ME</div>
            </li>
            <br>
            <br>
            <li>
                <div><a href="#contact">CONTACT</a></div>
                <div>CONTACT ME</div>
            </li>
        </ul>

        </div>
        <br>
        <br>
        <br><br><br>
        <div>
            <h3 id="work">WORKS-01</h3>
            <div class="colorone">

                <img src="UI.png" alt="" class="biaoti">
                <br>
                <img src="一级界面.jpg" alt="" class="workone">
                <img src="主界面.jpg" alt="" class="workone">
                <img src="二级界面.jpg" alt="" class="workone">
            </div>


            <h3>WORKS-02</h3>
            <div class="colortwo">
                <img src="icon3.png" alt="" class="biaoti">
                <br>
                <img src="LOGO.jpg" alt="" class="worktwo">
                <img src="runingpig_画板 1.jpg" alt="" class="worktwo">
                <img src="家有八公_画板 1.jpg" alt="" class="worktwo">
                <img src="马上到家2_画板 1.jpg" alt="" class="worktwo">
            </div>

            <h3>WORKS-03</h3>
            <div class="colorthree">
                <img src="版式设计.png" alt="" class="biaotione">
                <br>
                <img src="贴图效果_WPS图片1.jpg" alt="" class="workthree">
                <img src="贴图效果_WPS图片2.jpg" alt="" class="workthree">
                <img src="贴图效果_WPS图片3.jpg" alt="" class="workthree">
                <img src="贴图效果_WPS图片4.jpg" alt="" class="workthree">
                <img src="贴图效果_WPS图片5.jpg" alt="" class="workthree">
                <img src="贴图效果_WPS图片6.jpg" alt="" class="workthree">
                <!-- <img src="贴图效果_WPS图片7.jpg" alt="" class="workthree"> -->
            </div>


            <h3>WORKS-04</h3>
            <div class="colorfour">
                <img src="立体构成.png" alt="" class="biaotione">
                <br>
                <img src="立构1.jpg" alt="" class="workfour">
                <img src="立构2.jpg" alt="" class="workfourr">
            </div>
        </div>
        <h3 id="about">ABOUT ME</h3>
        <div class="colorfive">
            <p class="zipaijieshao">
                我
                <br> 一个来自普通家庭的
                <br> 普通女孩
                <br> 在机缘巧合选择了美术
                <br>走上设计的不归路
                <br> 或许我没有天赋
                <br> 但笨鸟先飞
                <br>我相信
                <br> 唯有努力能够击败一切
            </p>
            <img src="自拍.jpg" alt="" class="zipaizhao">

            <hr class="one" style="position: relative;top: -290px;">

            <img src="1.jpg" alt="" class="zone">
            <img src="2.jpg" alt="" class="ztwo">
            <br>
            <p class="zhaomao">
                同时
                <br> 很幸运
                <br> 拥有一个可爱的人儿
                <br> 陪伴着我所有的
                <br>坎坎坷坷
            </p>
            <img src="3.jpg" alt="" class="zthree">
            <img src="4.jpg" alt="" class="zfour">


            <p class="chi">没用什么特别的爱好
                <br>就是特别爱吃
                <br> 享受做美食的过程
                <br> 即使肥胖折磨着我
                <br> 也不能阻挡我对
                <br> 美食的
                <br>热爱
            </p>
            <img src="牛扒.jpg" alt="" class="niupa">
            <img src="披萨.jpg" alt="" class="pisa">
            <img src="鸡公煲.jpeg" alt="" class="jigongbao">
            <hr class="two">
            <p class="shipin">
                分享一些<br> 生活中的小碎片<br>
            </p>
            <iframe style='width: 980px;height: 520px' frameborder='no' allowfullscreen mozallowfullscreen webkitallowfullscreen src='http://go.plvideo.cn/front/video/preview?vid=30eae37d1bc964808d61758deedf7536_3'></iframe>
            <p class="jieshu" id="contact">
                我 <br>一个普通女孩<br> 一个在为生活努力的 <br>普通女孩 <br>没有特别贪心 <br>只要与家人幸福就好 <br>如果你对我感兴趣<br> 或许可以通过以下方式联系我
            </p>


        </div>


        <div class="footer">
            <div class="top">
                <h3>CONTACT</h3>
                <div class="dabox">
                    <a href="https://m.weibo.cn/u/6270030815?from=10AA395010&wm=9006_2001&sourceType=qq&uid=6270030815" target="blank"><img src="weibo.png" alt="" class="boxx"></a>
                    <a href="contact\index.html" target="blank"><img src="weixin.png" alt="" class="boxx"></a>
                    <a href="contact\index.html" target="blank"><img src="QQ.png" alt="" class="boxx"></a>
                    <a href="contact\index.html" target="blank"><img src="email.png" alt="" class="boxx"></a>
                </div>
            </div>

            <div class="bottom">
                Copyright 2020 All Rights Reserved @huhuan
            </div>
        </div>


    </body>

</html>